<template>
	<view class="popapp">
		<view class="main">
			<view class="tab">
				<view class="item" :class="tabs.current==index?'active':''" v-for="(item,index) in tabs.list" @click.stop="changeTab(index)">{{item}}</view>
			</view>
			
			<scroll-view class="tab-content" scroll-y v-if="tabs.current==0">
				<view class="order-box">
					<view class="flex justify-between items-start">
						<view class="userinfo">
							<view class="title">客户信息</view>
							<view class="flex justify-start items-center">
								<view class="avatar"><image :src="order.useravatar" mode="widthFix"></image></view>
								<view class="flex-col">
									<view>{{order.username}}</view>
									<view class="mobile">
										注册手机:<text class="link" @click.stop="loadMobile('user')">点击查看</text>
									</view>
								</view>
							</view>
						</view>
						<view class="userinfo">
							<view class="title">技师信息</view>
							<view class="flex justify-start items-center">
								<view class="avatar"><image :src="order.avatar" mode="widthFix"></image></view>
								<view class="flex-col">
									<view>{{order.techname}}<text class="desc">ID:{{order.technician_id}}</text></view>
									<view class="mobile">
										接单手机:<text class="link" @click.stop="loadMobile('tech_order')">点击查看</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="order-box">
					<view class="title">服务商</view>
					<view>
						<view>{{order.shopname}}<text class="desc">{{order.shopmobile}}</text></view>
					</view>
				</view>		
						
				<view class="order-box">
					<view class="title">订单服务地址</view>
					<view>
						<view>联系方式：{{order.realname}}，<text class="link" @click.stop="loadMobile('user_order')">点击查看电话</text></view>
						<view class="item">服务地址：{{order.province}}-{{order.city}}-{{order.district}}-{{order.address}}</view>
					</view>
				</view>
				
				<view class="order-box" style="padding-bottom: 50px;">
					<view class="flex justify-between items-start">
						<view class="title">订单信息</view>
						
						<view :class="'status status'+order.order_status"><text>{{order.order_status|orderStatusTxt}}</text></view>
					</view>
					
					<view>
						<view>订单号：{{order_sn}}</view>
						<view class="item flex justify-between items-center">
							<view class="flex_1">服务项目：{{order.sname}}</view>
							<view class="flex_1">服务时长：{{order.duration}}分钟</view>
						</view>
						
						<view class="item flex justify-between items-center">
							<view class="flex_1">订单金额：{{order.pay_money}}元</view>
							<view class="flex_1">优惠金额：{{order.discount}}元</view>
						</view>
						
						<view class="item flex justify-between items-center">
							<view class="flex_1">打车距离：{{order.total_distance}}公里</view>
							<view class="flex_1">往返车费：{{order.fare}}元</view>
						</view>
						<view class="item">预约时间：<text class="time">{{order.appointment_time * 1000|formatDate}}</text></view>
						
					</view>
				</view>
				
				<view class="operation">
					<view class="flex justify-between items-center list">
						<view class="item" @click.stop="viewPop('popup_refund')">退款</view>
						<view class="item" @click.stop="viewPop('popup_status')">设置状态</view>
						<view class="item" @click.stop="viewPop('popup_transfer')">改派</view>
					</view>
				</view>
				
				
				<uni-popup ref="popup_refund" type="bottom" :animation="true">
					<view class="popup_refund">
						<view class="content">
							<view class="item">
								<view class="title">支付总额</view>
								<view>{{order.pay_money}}元</view>
							</view>
							<view class="item">
								<view class="title">可退余额</view>
								<view>{{order.pay_money - order.refund}}元</view>
							</view>
							<view class="item">
								<view class="title">已退余额</view>
								<view>{{order.refund}}元</view>
							</view>
							<view class="item">
								<view class="title">退款类型</view>
								
								<radio-group class="type flex justify-start items-center" @change="setRefundType">
									<label><radio class="radio" value="1" :checked="refund.type=='1'" />扣空单费</label>
									<label><radio class="radio" value="3" :checked="refund.type=='3'" />部分退款</label>
									<label><radio class="radio" value="4" :checked="refund.type=='4'" />全部退款</label>
								</radio-group>
							</view>
							<view class="item">
								<view class="title">退款金额</view>
								<view>
									<input class="input" type="number" placeholder="请输入退款金额" v-model="refund.amount"/>
								</view>
							</view>
							<view class="item">
								<view class="title">退款原因</view>
								<view>
									<textarea class="input" placeholder="请输入退款原因" v-model="refund.reason" :auto-height="true"></textarea>
								</view>
							</view>
							
							<view class="flex justify-center items-center refundbtn">
								<view @click.stop="Refund()">确认退款</view>
								<view @click.stop="hidePop('popup_refund')">取消</view>
							</view>
						</view>

						
					</view>
				</uni-popup>
				
				<uni-popup ref="popup_status" type="bottom" :animation="true">
					<view class="popup_body">
						<view class="content">
							<view class="item">
								<view class="title">订单状态</view>
								<radio-group class="status-group" @change="statusChange">
									<label class="status-item" v-for="(item,index) in status.data"><radio class="radio" :value="item" :checked="order.order_status==item" />{{item|orderStatusTxt}}</label>
								</radio-group>
							</view>
							<view class="flex justify-center items-center btn">
								<view @click.stop="setStatus()">确认修改</view>
								<view @click.stop="hidePop('popup_status')">取消</view>
							</view>
						</view>		
					</view>
				</uni-popup>
				
				<uni-popup ref="popup_transfer" type="bottom" :animation="true">
					<view class="popup_body">
						<view class="content">
							<view class="search">
								<view class="input">
									<input v-model="searchKey" placeholder="输入技师ID、名字或手机号"/>
								</view>
								<view class="search-btn" @click.stop="loadTech()">搜索</view>
							</view>
							
							<scroll-view class="techlist" scroll-y>
								<view class="techitem panel" :class="selectTechid==item.id?'select':''" v-for="(item,index) in techlist" @click.stop="chooseTech(item.id)">
									<view class="left">
										<view class="avatar"><image mode="widthFix" :src="item.avatar"></image></view>
										<view>
											<view>{{item.realname}} ID<text class="desc">{{item.id}}</text></view>
											<view class="link viewmobile" @click.stop="loadTechMobile(item.id)">查看电话</view>
										</view>
									</view>
									<view class="right">
								
										<view v-if="item.yue==1||item.yue==2">最早可约:<text>{{item.appointment_time}}</text></view>
										<view v-else>休息中</view>
										
										<view class="distance">打车距离:<text>{{item.distance}}KM</text></view>
									</view>								
								</view>
							</scroll-view>
							
							<view class="flex justify-center items-center btn">
								<view @click.stop="transferOrder()">确认转单</view>
								<view @click.stop="hidePop('popup_transfer')">取消</view>
							</view>
							
						</view>
					</view>
				</uni-popup>
				
				
			</scroll-view>
		
			<scroll-view class="tab-content serviceret" scroll-y v-if="tabs.current==1">
				<view class="timeline">					
					<view class="timeline-item" :class="orderLogs[line.status]?'active':''" v-for="(line,indx) of timeline">
						<text class="timeline-axis icon"></text>
						<view class="timeline-content">							
							<view class="title flex justify-between">
								<view>{{line.name}}</view>
								<text v-if="orderLogs[line.status]">距离:{{testDistance(orderLogs[line.status].lat,orderLogs[line.status].lng,order.lat,order.lng)}}</text>
							</view>
							<view v-if="orderLogs[line.status]">
								<view class="signImg" v-if="orderLogs[line.status].attach">
									<image mode="heightFix" v-for="(pic,index) in JSON.parse(orderLogs[line.status].attach)" :src="pic" @click.stop="showpic(JSON.parse(orderLogs[line.status].attach),index)"></image>
								</view>
								<view class="time" v-if="orderLogs[line.status].create_time">{{orderLogs[line.status].create_time*1000|formatDate}}</view>
								<view class="callrecord" v-for="(call,index) in order.callrecord" v-if="call.order_status==line.status" @click.stop="playCall(call.voiceurl)">
									<view>
										<text v-if="call.calltype==0">
											{{call.type=='T'?'技师 » 客人':'客人 » 技师'}}
										</text>
										<text v-else>
											{{
												call.calltype==1?'系统 » 接单通知':
												(call.calltype==2?'系统 » 催单通知':'系统 » 下钟提醒')
											}}
										</text>
										<text class="time desc" v-if="call.callState==0">▶ {{call.endtime-call.starttime}}秒</text>
										<text class="time desc" style="color: #ff0000;" v-else>{{callStatus[call.callState]}}</text>
									</view>
									<view class="time">{{call.starttime*1000|formatDate}}</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="timeline-item active" v-if="order.refund_time>0">
						<text class="timeline-axis icon"></text>
						<view class="timeline-content">
							<view class="title">订单退款</view>
							<view class="time">{{order.refund_time*1000|formatDate}}</view>
						</view>
					</view>
				</view>
				
				<view class="playctr" v-if="isplay">
					<view class="justify-between flex items-center playctr-item">
						<view>{{playtime}}</view>
						<view v-if="isplay" @click="stopPlay">停止</view>
					</view>
				</view>
			</scroll-view>
		
			<scroll-view class="tab-content" scroll-y v-if="tabs.current==2">
				<view class="clockorder">				
					<view class="table">
						<view class="row header">
							<view class="cell">类型</view>
							<view class="cell">项目</view>
							<view class="cell">原价</view>
							<view class="cell">支付金额</view>
							<view class="cell">时间</view>
						</view>
						<view class="nodata" v-if="clockOrder.length<1">无数据</view>
						<view class="row body"  v-for="(item,index) in clockOrder">
							<view class="cell">{{item.order_type==1?'加钟':'升级'}}</view>
							<view class="cell">{{item.name}}</view>
							<view class="cell">{{item.price}}</view>
							<view class="cell">{{item.pay_money}}</view>
							<view class="cell time">{{item.create_time*1000|formatDate}}</view>
							
						</view>
					</view>	
				</view>
			</scroll-view>
			<scroll-view class="tab-content" scroll-y v-if="tabs.current==3">
				<view class="loglist">
					<view class="nodata" v-if="logs.length<1">无数据</view>
					
					<view class="log-item panel" v-for="(item,index) in logs">
						<view class="events"><text>{{item.name}}</text>{{item.events}}</view>
						<view class="time">{{item.create_time*1000|formatDate}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	var that=null,App,AppData,Comm;
	
	export default{
		name:"orderinfo",
		props:{
			order_sn:{
				type:String,
				default:''
			}
		},
		data(){
			return {
				tabs:{
					list:['订单详情','服务记录','加钟升级','处理记录'],
					current:0
				},
				callStatus:{"0":"正常","1":"空号","2":"用户忙","3":"拒接","4":"无人接听","5":"无法接通","6":"呼叫被拦截","7":"关机","8":"停机","9":"无法接通","10":"无效号码","11":"呼叫受限","12":"线路忙"},
				order:{},
				_order_sn:'',
				refund:{
					type:'3',
					amount:'',
					reason:''
				},
				status:{
					data:['1','2','8','9','3','4'],
					current:0
				},
				searchKey:'',
				techlist:[],
				logs:[],
				selectTechid:0,
				// timeline:[
				// 	{item:'create_time',name:'用户下单'},
				// 	{item:'receiving_time',name:'接单（待出发）'},
				// 	{item:'set_out_time',name:'技师出发'},
				// 	{item:'arrive_time',name:'技师到达'},
				// 	{item:'service_time',name:'开始服务'},
				// 	{item:'complete_time',name:'服务完成'},
				// ],
				timeline:[
					{status:1,name:'用户下单'},
					{status:2,name:'接单（待出发）'},
					{status:8,name:'技师出发'},
					{status:9,name:'技师到达'},
					{status:3,name:'开始服务'},
					{status:4,name:'服务完成'},
					{status:10,name:'技师离开'},
				],
				orderLogs:[],
				player:null,
				isplay:false,
				playtime:'00:00',
				clockOrder:[],
			};
		},
		created() {
			that=this,App=getApp(),AppData=getApp().globalData,Comm=getApp().comm;
			console.log('created');
		},
		mounted() {
			console.log('page mounted');
			this._order_sn=this.order_sn;
			this.loadOrdInfo();
		},
		destroyed() {
			console.log('page destroyed');
			this.stopPlay();
		},
		methods:{
			changeTab(i){
				if(this.tabs.current==i)
					return;
				this.tabs.current=i;
				
				if(i==0){
					this.loadOrdInfo();
				}
				if(i==1){
					this.loadTimeLine();
				}
				if(i==2){
					this.loadClockOrder();
				}
				if(i==3){
					this.loadLogs();
				}
			},
			viewPop(action){
				if(action=='popup_transfer'){
					this.techlist=[];
					this.selectTechid=0;
				}
				this.$refs[action].open();
			},
			hidePop(action){
				this.$refs[action].close();
			},
			setRefundType(e){
				this.refund.type=e.detail.value;
				this.refund.amount=e.detail.value=='4'?(this.order.pay_money - this.order.refund):(e.detail.value=='1'?(this.order.pay_money - this.order.refund - 10):'');
			},
			loadOrdInfo(){
				const order_sn=this._order_sn;
				Comm.http('/api/service/orderinfo',{order_sn},'POST').then(res=>{
					if(res.code==1){
						that.order=res.data;
						that.status.current=res.data.order_status;
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						});
					}
				});
			},
			loadTimeLine(){
				Comm.http('/api/service/loadTimeLine',{order_sn:this.order_sn},'POST').then(res=>{
					if(res.code==1){
						that.orderLogs=res.data;
					}
					else{
						uni.showToast({
							icon:'none',
							title:res.msg
						});
					}
				});
			},
			loadClockOrder(){
				Comm.http('/api/service/clockOrder',{order_id:this.order.id},'POST').then(res=>{
					if(res.code==1){
						that.clockOrder=res.data;
					}
					else{
						uni.showToast({
							icon:'none',
							title:res.msg
						});
					}
				});
			},
			loadMobile(type){
				const order_sn=this._order_sn;
				Comm.http('/api/service/viewmobile',{order_sn,type},'POST').then(res=>{
					if(res.code==1){
						let mobile=type=='tech_order'?(res.data.order_mobile||res.data.mobile):res.data.mobile;
						uni.showModal({
							showCancel:false,
							title:'电话查看',
							content:mobile,
							complete() {
								that.copy(mobile)
							}
						});
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						});
					}
				});
			},
			loadTechMobile(id){
				Comm.http('/api/service/viewtechmobile',{id},'POST').then(res=>{
					if(res.code==1){
						const mobile=res.data.order_mobile||res.data.mobile;
						uni.showModal({
							showCancel:false,
							title:'【'+res.data.realname+'】电话查看',
							content:mobile,
							complete() {
								that.copy(mobile)
							}
						});
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						});
					}
				});
				
			},
			loadTech(){
				const order_sn=this._order_sn;
				Comm.http('/api/service/techmap',{order_sn,key:this.searchKey},'POST').then(res=>{
					if(res.code==1){
						that.techlist=res.data;
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						});
					}
				});
			},
			loadLogs(){
				Comm.http('/api/service/loadLogs',{order_sn:this.order_sn},'POST').then(res=>{
					if(res.code==1){
						that.logs=res.data;
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						});
					}
				});
			},
			chooseTech(id){
				this.selectTechid=id;
			},
			Refund(){
				if(!(/^\d$/.test(this.refund.type))){
					uni.showToast({
						title:'退款状态有误',
						icon:'error'
					});
					return;
				}
				if(!(/^\d+$/.test(this.refund.amount))){
					uni.showToast({
						title:'退款金额有误',
						icon:'error'
					});
					return;
				}
				if(this.refund.amount<=0 || this.refund.amount>(this.order.pay_money - this.order.refund)){
					uni.showToast({
						title:'退款金额有误!',
						icon:'error'
					});
					return;
				}
				if(!(/^.{1,}$/.test(this.refund.reason))){
					uni.showToast({
						title:'请填写退款原因',
						icon:'error'
					});
					return;
				}
				uni.showModal({
					title:'提示',
					content:'是否确认退款?',
					confirmText:'确认退款',
					complete(e) {
						if(e.confirm){
							Comm.http('/api/service/refund',{order_sn:that.order_sn,type:that.refund.type,amount:that.refund.amount,reason:that.refund.reason},'POST').then(res=>{
								if(res.code==1){
									that.hidePop('popup_refund');
									that.loadOrdInfo();
									uni.showToast({
										icon:'none',
										title:res.msg
									});
								}else{
									uni.showToast({
										icon:'none',
										title:res.msg
									});
								}
							});

						}
					}
				});
			},
			statusChange(o){
				this.status.current=o.detail.value;
			},
			setStatus(){
				uni.showModal({
					title:'提示',
					content:'是否确认修改状态?',
					confirmText:'确认修改',
					complete(e) {
						if(e.confirm){
							Comm.http('/api/service/setstatus',{order_sn:that.order_sn,status:that.status.current},'POST').then(res=>{
								if(res.code==1){
									that.hidePop('popup_refund');
									that.loadOrdInfo();
									uni.showToast({
										icon:'none',
										title:res.msg
									});
								}else{
									uni.showToast({
										icon:'none',
										title:res.msg
									});
								}
							});
				
						}
					}
				});
			},
			transferOrder(){
				uni.showModal({
					title:'提示',
					content:'是否确认转单?',
					confirmText:'确认转单',
					complete(e) {
						if(e.confirm){
							Comm.http('/api/service/TransferOrder',{order_sn:that.order_sn,techid:that.selectTechid},'POST').then(res=>{
								if(res.code==1){
									that.hidePop('popup_transfer');
									that.loadOrdInfo();
									uni.showToast({
										icon:'none',
										title:res.msg
									});
								}else{
									uni.showToast({
										icon:'none',
										title:res.msg
									});
								}
							});
				
						}
					}
				});
			},
			copy(txt){
				Comm.copy(txt);
			},
			showpic(url,i){
				uni.previewImage({
					urls:url,
					current:i
				})
			},
			playCall(url){
				this.copy(url);
				this.isplay=false;		
				if(this.player){
					this.player.src=url;
					this.isplay=true;
					this.player.play();
				}else{
					this.player=uni.createInnerAudioContext();
					this.player.src=url;
					this.player.onCanplay(res=>{
						this.isplay=true;
						this.player.play();
					});
				}
			
				this.player.onTimeUpdate(res=>{
					this.playtime=this.timeFormat(this.player.currentTime) + '/' + this.timeFormat(this.player.duration);
				});
				
				this.player.onEnded(res=>{
					this.playtime='00:00';
					this.isplay=false;
				});
				
				this.player.onError(res=>{
					this.isplay=false;
					this.playtime='00:00';
					uni.showToast({icon:'none',title:'播放失败'});
				});
			},
			stopPlay(){
				this.isplay=false;
				this.player=this.player?this.player:uni.createInnerAudioContext();
				this.playtime='00:00';
				this.player.stop();
			},
			timeFormat:function(t){
				let min = parseInt(t/60);
				min = min < 10?'0'+min:min;
				let sec = parseInt(t%60);
				sec = sec < 10?'0'+sec:sec;
				return `${min}:${sec}`;
			},
			testDistance(longitude1, latitude1, longitude2, latitude2) {
					console.log(longitude1, latitude1, longitude2, latitude2);
			    var EARTH_RADIUS = 6370.996; // 地球半径系数  
			    var PI = 3.1415926;  
			    var radLat1 = latitude1 * PI / 180.0;  
			    var radLat2 = latitude2 * PI / 180.0;  
			    var radLng1 = longitude1 * PI / 180.0;  
			    var radLng2 = longitude2 * PI / 180.0;  
			    var a = radLat1 - radLat2;  
			    var b = radLng1 - radLng2;  
			    var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));  
			    var res= Math.round(distance * EARTH_RADIUS * 1000);
				return res>1000?`${res/1000}公里`:`${res}米`
			}
		}
	}
</script>

<style lang="scss">
.popapp{
	background-color: #fff;
	// height: 75vh;
	
	// width: 100vw;
}
.main{
	
	// width: 95vw;
	margin: 0 auto;
	padding: 8px 8px;
	max-width: 600px;
}
.tab{
	display: flex;
	justify-content: space-around;
	.item{
		line-height: 25px;
		flex: 1;
		text-align: center;
	}
	.active{
		border-bottom: 2px solid #ffaa00; font-weight: bold;
	}
}
.tab-content{
	margin-top: 8px;
	height: calc(70vh);
	font-size: 13px;
	.order-box{
		padding: 8px 0;
		border-bottom: 1px dashed #eee;
		margin-bottom: 8px;
		.title{
			padding-left:8px;
			border-left: 3px solid #1890ff;
			margin-bottom: 8px;
		}
		.item{
			margin-top: 8px;
		}
		.flex_1{
			flex: 1;
		}
	}
	
	.timeline{
		padding: 16px 0;
		.timeline-item {
		    position: relative;
		    padding-bottom: 16px;
		}
		.timeline-item:first-child:before {
		    display: block;
		}
		.timeline-item:last-child{
			padding-bottom: 0;
		}
		.timeline-item:last-child:before {
		    display: none
		}
		.timeline-item:before {
		    content: "";
		    position: absolute;
		    left: 7.5px;
		    top: 0;
		    z-index: 0;
		    width: 1px;
		    height: 100%;
		    background-color: #eee;
		}
		.timeline-item.active .timeline-axis{
			border: 1px solid rgb(56, 152, 124);
		}
		
		.timeline-item.active .title{
			color: #303133;
		}
		.timeline-item.active .title>text{
			font-size: 12px; color: #666; margin-left: 8px;
		}
		.timeline-axis{
		    position: absolute;
		    left: 0;
		    top: 0;
		    z-index: 10;
		    width: 15px;
		    height: 15px;
		    background-color: #fff;
		    color: rgb(56, 152, 124);
		    border-radius: 50%;
			border: 1px solid #909193;
		}
		
		.timeline-content {
		    padding-left: 25px;
			position: relative;
			top: -3px;
		}
		.timeline-content .title{
			position: relative;
			line-height: 22px;
			font-size: 14px;
			color: #909193;
		}
		.timeline-content .info{
			color: #909193;
		}
		.timeline-content .signImg{
			display: flex; justify-content: flex-start;
		}
		.timeline-content .signImg>image{
			height: 80px;
			margin-right: 8px;
			margin-bottom: 3px;
		}
		.callrecord{
			background-color: #f6f6f6; padding: 5px 8px; border-radius: 10px; margin-top: 5px; font-size: 12px;
			display: flex; justify-content: space-between; align-items: center;
			.desc{
				margin-left: 5px;
			}
		}
	}


}

.serviceret{
	// height: calc(75vh - 33px);
}

.userinfo{
	flex: 1; font-size: 13px;
	.mobile{
		margin-top: 3px;
	}
}
.avatar{
	height: 32px; width: 32px; border-radius: 50%; overflow: hidden; margin-right: 5px;
}
.avatar image{
	width: 100%; height: 100%;
}
.desc{
	margin-left: 6px;
}
.desc,.time{
	color: #666; font-size: 12px;
}
.link{
	color: #0000ff;
	cursor:pointer;
}
.operation{
	position: fixed; left: 0; bottom: 0; width: 100vw; background-color: #fff; border-top:2px solid #f0f0f0; 
	.list{
		height: 45px;
		max-width:640px;
		margin: 0 auto;
		.item{
			flex: 1; 
			align-self: center;
			text-align: center;
			font-size: 14px;
		}
		.item:nth-child(2){
			border-left: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0;
		}
	}
}
.popup_refund{
	background: #fff;
	padding: 16px 16px 0px;
	.content{
		max-width: 640px; margin: 0 auto;
	}
	.item{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 16px;
	}
	.item .input{
		font-size: 13px;     padding: 8px;
    width: auto; border-radius: 5px; border:none; background-color: #f0f0f0;
	}
	.item>view:nth-child(1){
		margin-right: 8px;
	}
	.item>view:nth-child(2){
		flex: 1;
	}
	.refundbtn{
		border-top: 2px solid #f0f0f0; margin-top: 16px;
	}
	.refundbtn>view{
		height: 45px; line-height: 45px; flex: 1; text-align: center; font-size: 14px;
	}
	.refundbtn>view:nth-child(1){
		border-right: 1px solid #f0f0f0;
	}
	.content{
		.type{
			flex: 1; align-items: center;
		}
		.type>label{
			flex: 1; display: flex; align-items: center;
		}
		.type .radio{
			transform:scale(0.8);
		}
	}
}

.popup_body{
	background: #fff;
	padding: 16px 16px 0px;
	.content{
		max-width: 640px;
		margin: 0 auto;
	}
	.btn{
		border-top: 2px solid #f0f0f0; margin-top: 16px;
	}
	.btn>view{
		height: 45px; line-height: 45px; flex: 1; text-align: center; font-size: 14px;
	}
	.btn>view:nth-child(1){
		border-right: 1px solid #f0f0f0;
	}
	.item{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 16px;
	}
	.item>view:nth-child(1){
		margin-right: 8px;
	}
	.item>view:nth-child(2){
		flex: 1;
	}
	.status-group{
		flex: 1;
		display: flex; flex-wrap: wrap;
		justify-content: flex-start;
		.status-item{
			padding: 8px; transform: scale(0.9);
		}
	}
}

.search{
	display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
	.input{
		flex: 1;
		border-radius: 5px; border:none; background-color: #f0f0f0;
	}
	.input input{
		font-size: 13px;     
		padding: 6px 8px;
		width: auto;
	}
	.search-btn{
		margin-left: 16px; color: #fff;
		background-color: #2d8cf0;
		border-color: #2d8cf0;
		border-radius: 10px;
		padding: 6px 16px;
	}
}
.techlist{
	height: calc(70vh - 95px);
	.techitem{
		display: flex; justify-content: space-between; align-items: center;
		position: relative;
		
		.left{
			display: flex; justify-content: space-between; align-items: center;
			.viewmobile{
				margin-top: 3px; font-size: 12px;
			}
		}
		.right{
			flex: 1;
			align-items: flex-end;
			text-align: right;
			.distance{
				margin-top: 3px;
			}
			text{
				color: #ffaa00; font-size: 12px;
			}
		}
	}
	.select{
		background-color:rgb(240, 250, 255);
		border-bottom: #1890ff 3px solid;
	}
}
.clockorder{
	position: relative;
}
.loglist{
	.log-item{
		line-height: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.events{
			flex: 1; margin-right: 8px; line-height: 1.3;
		}
		.events>text{
			margin-right: 5px; color: #2d8cf0;
		}
	}
}
</style>